<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>机器管理</BreadcrumbItem>
      <BreadcrumbItem>广告视频列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        广告视频ID: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        广告视频标题: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        设备搜索: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        <div class="rowWrapper">
          <div>
            <span>
            上传进度:
            </span>
          </div>
          <Select v-model="select" style="width: 120px">
            <Option value="1">请选择</Option>
          </Select>
        </div>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="$router.push('/video/upload')" style="margin-right: 10px">搜索</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="$router.push('/video/upload')" style="margin-right: 10px">上传</Button>
      </FormItem>
    </Form>
    <div>
      <span>注释：（仅作为解释说明）
1.全部用模糊搜索</span>
    </div>
    <div>
      <Table :columns="columns1" :data="data" :height="height">
        <template slot="device">
          <Button type="primary">选择上传设备</Button>
        </template>
        <!--        上传文件是否成功的判断-->
        <template slot-scope="{ row }" slot="option">
          <div class="rowWrapper">
            <Button type="success" @click="$router.push('/device/uploadadVideo')">修改</Button>
            <Button type="primary" @click="$router.push('/video/videoPerview')" style="margin-left: 10px;">视频预览</Button>
            <Button type="error" style="margin-left: 10px;">删除</Button>
          </div>
        </template>
      </Table>
    </div>
    <!--    分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20"
            :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>

    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  data() {
    return {
      select: '1',
      params: {
        device_time: [],
        status: 1,
        user_id: "",
        order_id: "",
        activity_id: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      page: {},
      height: this.$store.state.height,
      modal1: false,
      modal3: false,
      data1: [
        {
          id: 1,
          title: "机器组3",
        },
        {
          id: 2,
          title: "机器组4",
        },
      ],
      request: {
        device_number: "",
        page: 1,
      },
      columns1: [
        {
          title: "上传设备",
          key: "id",
          minWidth: 150,
          align: "center"
        },
        {
          title: "操作人",
          key: "titles",
          minWidth: 300,
          align: "center"
        },
        {
          title: "上传时间",
          key: "imgs",
          minWidth: 150,
          align: "center",
        },
        {
          title: "修改时间",
          // key: "device",
          minWidth: 150,
          slot: 'device',
          align: "center",
        },
        {
          title: "视频上传进度",
          key: "operator",
          minWidth: 150,
          align: "center",
        },
        {
          title: "操作",
          slot: 'option',
          minWidth: 300,
          align: "center",
        },
      ],
      data: [
        {
          id: '001',
          titles: '18457',
          brief: '美食类',
          device: 'B45709',
          operator: '李四',
          submit_time: '2021-09-18',
          change_time: '2021-10-18'
        },
        {
          id: '002',
          titles: '12368',
          brief: '爱情类',
          device: 'B45765',
          operator: '张三',
          submit_time: '2021-09-20',
          change_time: '2021-10-25'
        }
      ],
      role_id: null,
    };
  },
  mounted() {
  },
  methods: {
    add3() {
      this.cancel();
      this.modal3 = true
      this.allocated = [];
      this.undistributed = [];
      if (this.infoID === 6) {
        console.log('6')
        this.axios.post("device/getAllDev").then(res => {
          if (res.code === 1) {
            this.allocated = res.data.allocated;
            this.undistributed = res.data.undistributed;
          }
        });

      }
    },
    init() {
      this.axios.post("order/order_list", this.params).then((res) => {
        console.log("this.params: ", this.params);
        if (res.code === 1) {
          console.log(res);
          this.total = res.data.count;
          this.tableData = res.data.list;
        }
      });
    },
    search() {
      this.params.page = 1;
      this.init();
    },
    confirm() {
      this.modal1 = false;
      this.$Message.success("保存成功！");
      this.cancel();
    },
    cancel() {
    },
    add() {
      this.modal1 = true;
    },
    setStatus(id, status) {
      var text = "确定要" + (status === 1 ? "启用" : "禁用") + "此机器组么？";
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success("操作成功");
        },
        onCancel: () => {
        },
      });
    },
    lists() {
    },
    timechange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.init();
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.door_device {
  position: relative;
  top: -20px;
}

.vertical {
  font-size: 16px;

}
</style>
